<!-- 历史流量 -->
<template>
  <div class="dashboard-editor-container">
    <el-row style="background: #fff; padding: 16px; margin-bottom: 32px">
      <connsearch
        ref="connsearch"
        :formOptions="formOptions"
        @search="search"
        @reset="reset"
      />
      <!-- <div class="tabclick">
        <div class="tabitem" @click="handleClick()">
          <span>显示加速流量趋势<i :class="tab ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i></span>
        </div>
      </div> -->
      <el-row>
        <el-col :xs="24" :sm="24" :lg="24">
          <el-card style="margin-bottom: 20px">
            <template #header>
              <span>设备历史流量</span>
            </template>
            <linechart :chart-data="lineChartData" />
          </el-card>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :sm="24" :lg="24">
          <el-card>
            <template #header>
              <span>终端流量排名</span>
            </template>
            <transversechart
              :chartData="barchartData"
              title="最近终端流量排名"
            />
          </el-card>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>

<script>
import { connrequest } from "@/api/firstPage.js";
import connsearch from "@/components/connSearch";
import transversechart from "./components/transversechart.vue";
import linechart from "./components/linechart.vue";
import conntable from "./components/conntable.vue";
import { parseTime } from "@/utils/index.js";
export default {
  components: { connsearch, linechart, transversechart, conntable },
  data() {
    return {
      total: 0,
      pageNum: 1,
      pageSize: 10,
      tab: false,
      searchform: {},
      tableData: [],
      barchartData: { xAxis: [], series: [] },
      lineChartData: {
        time: [],
        expectedData: [],
        actualData: []
      },
      formOptions: [
        {
          col: 8,
          label: "日期", // label文字
          prop: "timeRange", // 字段名
          element: "el-date-picker", // 指定elementui组件
          type: "" // 日期选择类型,
        }
      ]
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    // 默认取60分钟前
    let date = new Date();
    let i = date.getMinutes();
    let StartTime = parseTime(
      date.setMinutes(i - 60),
      "{y}-{m}-{d} {h}:{i}:{s}"
    );
    let arr = [StartTime, ""];
    this.formOptions.map((item) => {
      if (item.label === "日期") {
        item.initValue = arr;
      }
    });
    this.$set(this.searchform, "timeRange", arr);
    this.getData();
    this.GetShadowStreamSum();
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    async GetShadowStreamSum() {
      let xAxis = [];
      let series = [];
      const data = {
        Filter: {
          StartTime: this.searchform.timeRange?.[0] || "",
          EndTime: this.searchform.timeRange?.[1] || "",
          SumCount: 10
        }
      };
      const res = await connrequest("GetShadowStreamSum", data);
      res.Data = res.Data || [];
      res.Data.map((item) => {
        xAxis.push(item.Name);
        series.push(item.Count);
      });
      this.barchartData = { xAxis, series };
    },
    async getData() {
      // 默认取60分钟前
      let date = new Date();
      let i = date.getMinutes();
      let StartTime = parseTime(
        date.setMinutes(i - 60),
        "{y}-{m}-{d} {h}:{i}:{s}"
      );
      let UpByte = [];
      let downByte = [];
      let time = [];
      const data = {
        Paging: {
          QueryPageNo: this.pageNum,
          QueryPageLength: this.pageSize
        },
        Filter: {
          StartTime: this.searchform.timeRange?.[0] || StartTime,
          EndTime: this.searchform.timeRange?.[1] || "",
          TransDate: "",
          Name: "",
          Descp: ""
        }
      };
      const res = await connrequest("GetHistorySumStreamLog", data);
      res.Data = res.Data || [];
      res.Data = res.Data.map((item) => {
        item.TransTime = parseTime(item.TransTime);
        time.push(parseTime(item.TransTime, "{h}:{i}"));
        UpByte.push(item.UpRate);
        downByte.push(item.DownRate);
        return item;
      });
      this.lineChartData = { time, UpByte, downByte };
      this.tableData = res.Data;
    },
    // 搜索
    search(val) {
      this.searchform = val;
      this.getData();
      this.GetShadowStreamSum();
    },
    // 重置
    reset() {
      // 默认取60分钟前
      let date = new Date();
      let i = date.getMinutes();
      let StartTime = parseTime(
        date.setMinutes(i - 60),
        "{y}-{m}-{d} {h}:{i}:{s}"
      );
      // let arr = [ parseTime(xTime), parseTime(endTime)]
      let arr = [StartTime, ""];
      this.pageNum = 1;
      this.formOptions = this.formOptions.map((item) => {
        if (item.label === "日期") {
          item.initValue = arr;
        }
        return item;
      });
      this.$set(this.searchform, "timeRange", arr);
      this.$refs.connsearch.addInitValue();
      this.getData();
      this.GetShadowStreamSum();
    },
    handleClick() {
      this.tab = !this.tab;
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~@/styles/variables.scss";
@import "./components/css/conncss.scss";
.down-canvas {
  height: 200px;
}
</style>
